<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/basic.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="icon" href="../img/favicon.ico">
</head>
<body>
    <div class="topbar-wrapper">
        <div class="topbar-content w clearfix">
            <ul class="items">
                <li><a href="#">小米商城</a></li>
                <li class="line"></li>
                <li><a href="#">MIUI</a></li>
                <li class="line"></li>
                <li><a href="#">loT</a></li>
                <li class="line"></li>
                <li><a href="#">云服务</a></li>
                <li class="line"></li>
                <li><a href="#">金融</a></li>
                <li class="line"></li>
                <li><a href="#">有品</a></li>
                <li class="line"></li>
                <li><a href="#">小爱开放平台</a></li>
                <li class="line"></li>
                <li><a href="#">企业团购</a></li>
                <li class="line"></li>
                <li><a href="#">资质证照</a></li>
                <li class="line"></li>
                <li><a href="#">协议规则</a></li>
                <li class="line"></li>
                <li class="qrcode-area">
                    <a href="#" class="app">
                    下载app
                    <!-- 因为二维码也有点击跳转的效果，所以要放在超链接内 -->
                    <div class="qrcode">
                        <img src="../img/download.png" >
                        <!-- 这里默认文字和图片会一行显示，可以设置
                        img的margin来吧文字给挤下来 -->
                       <span>小米商城app</span>
                    </div>

                </a></li>
                <li class="line"></li>
                <li><a href="#">Select Location</a></li>
            </ul>

            <!-- 这里注意因为使用了向右浮动，所以元素的顺序要调换 -->
            <div class="shopping-cart">
                <a href="#">
                    <i class="iconfont icon-gouwuche2"></i>
                   购物车(0)
                </a>
                <div class="cart-info">
                    
                </div>
            </div>

            <ul class="user">
                <li><a href="#">登录</a></li>
                <li class="line"></li>
                <li><a href="#">注册</a></li>
                <li class="line"></li>
                <li><a href="#">消息通知</a></li>
            </ul>

           
        </div>
    </div>

    <div class="nav-wrapper">
        <div class="nav-content w">
            <div class="logo" title="小米">
                <!-- 小米官网 -->
                <a href="#" class="logo-home"></a>
                <a href="#" class="logo-icon"></a>
            </div>

            <div class="items">
                <ul class="items-ul">
                    <li>
                        <a href="#" class="all-goods">全部商品分类</a>
                        <ul class="category-list" id="category-list">
                            <li>
                                <a href="#">手机 电话卡</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">电视 盒子</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">笔记本 平板</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">家电 插线板</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">出行 穿戴</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">智能 路由器</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">电源 配件</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">健康 儿童</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">耳机 音箱</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                            <li>
                                <a href="#">生活 箱包</a>
                                <i class="iconfont icon-jiantou"></i>
                            </li>
                        </ul>

                        <div class="category-info" id="category-info">

                        </div>

                    </li>
                    <li class="active"><a href="#">小米手机</a></li>
                    <li class="active"><a href="#">Redmi 红米</a></li>
                    <li class="active"><a href="#">电视</a></li>
                    <li class="active"><a href="#">笔记本</a></li>
                    <li class="active"><a href="#">家电</a></li>
                    <li class="active"><a href="#">路由器</a></li>
                    <li class="active"><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                    
                    <div class="select-area"></div>
               
                </ul>
               
            
            </div>

            <div class="search-area">
                <form action="#">
                    <div class="text-area">
                        <input type="text" name="product" class="text" autocomplete="off" placeholder="小米11">
                        <div class="search-result"></div>

                    </div>
                    <button class="iconfont icon-sousuo button"></button>
                </form>
            </div>
        </div>
    </div>

    <div class="banner w">
        <ul class="image-list">
            <li><a href="#"><img src="../img/banner1.jpg"></a></li>
            <li><a href="#"><img src="../img/banner2.jpg"></a></li>
            <li><a href="#"><img src="../img/banner3.jpg"></a></li>
            <li><a href="#"><img src="../img/banner4.jpg"></a></li>
            <li><a href="#"><img src="../img/banner5.jpg"></a></li>
        </ul>
        <!-- 
            这样来写不行  单纯的点可以使用a标签display为一个块元素
            为什么不能使用
                <li><a href="#"></a></li>
            这种方式呢？
            因为这里的li中是没有实质性的内容的，有li出现内部必须加上内容

            
            <ul class="point">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
          
        </ul> -->

        <div class="point">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>

        <div class="arrow">
            <a href="#" class="prev-arrow"></a>
            <a href="#" class="next-arrow"></a>
        </div>

      

    </div>

    <div class="ad-wrapper w clearfix">
        <ul class="iconlist">
            <li><a href="#">
                <i class="iconfont icon-naozhong"></i>
                小米秒杀
            </a></li>
            <li><a href="#">
                 <i class="iconfont icon-jianzhu"></i>
                企业团购
            </a></li>
            <li><a href="#">
                <i class="iconfont icon-tongdao"></i>
                F码通道
            </a></li>
            <li><a href="#">
                <i class="iconfont icon-cardb"></i>
               米粉卡
            </a></li>
            <li><a href="#">
                <i class="iconfont icon-iconfontzhizuobiaozhun023147"></i>
                以旧换新
            </a></li>
            <li><a href="#">
                <i class="iconfont icon-huafei"></i>
                 话费充值
            </a></li>

        </ul>
        <ul class="ad-list">
            <li><a href="#"><img src="../img/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="../img/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="../img/3.jpg" alt=""></a></li>
        </ul>

    </div>
  <script src="../js/index.js"></script>
</body>
</html>